<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" href="https://cdn.91haoka.cn/vant.css" />
		<link rel="stylesheet" href="https://static.91haoka.cn/all.css">
		<script src="https://cdn.91haoka.cn/vue.min.js"></script>
		<script src="https://cdn.91haoka.cn/vantall.js"></script>
		<script src="https://cdn.91haoka.cn/axios.min.js"></script>
	</head>
	<style>
		#app{ background: #fff; min-height: 100vh; width: 100vw; font-size: 0.25rem;}
		img{ max-width: 100%; display: block;}
		.flex{ display: flex;}
		.flexc{ display: flex; align-items: center;}
		.flexbc{ display: flex; justify-content: space-between; align-items: center;}
		.flexcc{ display: flex; justify-content: center; align-items: center;}
		.yy{box-shadow: 0 0 0.1rem #eaeaea; padding: 0.2rem 0.3rem; margin-bottom: 0.3rem;}
		.act{ text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7); border-bottom: 2px #1989fa solid !important; color:#1989fa !important;}
		
	</style>
	<body>
		<div id="app">
			<div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
				<div style="position: absolute; left: 0.3rem; top: 0.2rem;"><img src="img/tx.webp" style="width: 0.5rem; height: 0.5rem;"></div>
				<div style="color: #fff;  font-weight: bold;">客户详情</div>
			</div>
			<div style="padding: 0.3rem;">
				<div class="yy" v-for="(item,index) in 5" :key="index" style="margin-bottom: 0.2rem;"> 
				<div class="flexbc">
					<div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">开发区万光科技产业园</div>
					<div>编辑</div>
				</div>
					
					
					<div class="flex">
						<div style="flex: 1; overflow: hidden;">
							<div style="color: #999; margin-bottom: 0.1rem;">跟进状态</div>
							<div style="color: #666; margin-bottom: 0.2rem;">意向</div>
							<div style="color: #999; margin-bottom: 0.1rem;">创建时间</div>
							<div style="color: #666; font-size: 0.2rem;" >2022-1-2 13:06:39</div>
						</div>
						<div style="flex: 1; overflow: hidden;">
							<div style="color: #999; margin-bottom: 0.1rem;">客户类型</div>
							<div style="color: #666; margin-bottom: 0.2rem;">重要客户</div>
							<div style="color: #999; margin-bottom: 0.1rem;">最近一次拜访</div>
							<div style="color: #666; font-size: 0.2rem;">2022-1-2 13:06:39</div>
						</div>
						<div style="flex: 1; overflow: hidden;">
							<div style="color: #999; margin-bottom: 0.1rem;">联系电话</div>
							<div style="color: #666; margin-bottom: 0.2rem;">155XXXXX654</div>
							<div style="color: #999; margin-bottom: 0.1rem;">客户状态</div>
							<div style="color: #666; font-size: 0.2rem;">已审批</div>
						</div>
					</div>
				</div>

				
				
				<div class="flexcc" v-if="list != ''">
					<div><img src="img/tx.webp" style="width: 0.4rem; margin-right: 0.1rem;"></div>
					<div>点击添加联系人</div>
				</div>
				
				
				
			</div>
			
			<van-popup v-model="tuihuilog" position="center">
				<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
					<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;">退回至公海客户</div>
					
					<div style="padding: 0.3rem 0; color: #666;">
						<div>是否确定将所选客户退回至公海客户？</div>
						<div>转移成功后，此客户数据将属于公共资源，原负责人不能再维护跟进和更新此客户数据。</div>
					</div>
					
					<div class="flexcc">
						<van-button type="default" size="small" style="margin-right: 0.6rem;">取消</van-button>
						<van-button type="info" size="small" >确认</van-button>
					</div>
				</div>
			</van-popup>
			<van-popup v-model="shanchulog" position="center">
				<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
					<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;">退回至公海客户</div>
					
					<div style="padding: 0.3rem 0; color: #666;">
						<div>是否确定将所选客户删除？</div>
						<div>删除成功后，原负责人不能再维护跟进和更新此客户数据。</div>
					</div>
					
					<div class="flexcc">
						<van-button type="default" size="small" style="margin-right: 0.6rem;">取消</van-button>
						<van-button type="info" size="small" >确认</van-button>
					</div>
				</div>
			</van-popup>
			
		</div>
	</body>
	<script>
		var h = document.documentElement.clientWidth / 7.5 + 'px';
		    document.documentElement.style.fontSize = h;
		new Vue({
		    el: '#app',
		    data: function() {
		    	return {
					act:3,
					tuihuilog:false,
					shanchulog:false,
					list:[
						{id:1},
						{id:2}
					]
		        }
		    },
		    created(){
		       
		    },
		    mounted () {
		 
		    },
		    methods:{
				// @confirm="sexConfirm" @cancel="sexCancel"  @change="sexChange"
				sexConfirm:function(val){
					
					this.sex.xuanzhong = val
					console.log(this.sex.xuanzhong)
					this.sex.log = false
				},
				sexCancel:function(val){
					console.log(val)
				},
				sexChange:function(val){
					console.log(val)
				}
		    },
		})
		
	</script>
</html>